<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import * as math from '../../src/og/math.js';
        import { Globe } from '../../src/og/Globe.js';
        import { LonLat } from '../../src/og/LonLat.js';
        import { Vec3 } from '../../src/og/math/Vec3.js';
        import { Quat } from '../../src/og/math/Quat.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { Vector } from '../../src/og/layer/Vector.js';
        import { GeoImage } from '../../src/og/layer/GeoImage.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        //
        // Orbit circles
        //
        var size = 5.0;
        var greenOrbit = [];
        var p = new Vec3(0, 0, 6378137.0 + 3000000.0);
        var q = Quat.axisAngleToQuat(new Vec3(1, 1, 0).normalize(), size * math.RADIANS);

        var redOrbit = [];
        var p2 = new Vec3(0, 0, 6378137.0 + 5000000.0);
        var q2 = Quat.axisAngleToQuat(new Vec3(-0.1, 1, 0.1).normalize(), size * math.RADIANS);

        for (var i = 0; i < 360; i += size) {
            p = q.mulVec3(p);
            greenOrbit.push(p);

            p2 = q2.mulVec3(p2);
            redOrbit.push(p2);
        }

        //
        // Geodetic grid
        //
        var grid = [];
        //meridians
        for (var i = -180; i < 180; i += 10) {
            var mer = [];
            for (var j = -90; j <= 90; j++) {
                mer.push(new LonLat(i, j, 20000));
            }
            grid.push(mer);
        }

        //parallels
        for (var i = -90; i < 90; i += 10) {
            var mer = [];
            for (var j = -180; j <= 180; j++) {
                mer.push(new LonLat(j, i, 20000));
            }
            grid.push(mer);
        }

        var collection = new Vector("Collection", {
            'entities':
                [{
                    'polyline': {
                        'pathLonLat': grid,
                        'thickness': 1,
                        'color': "rgba(68, 157, 205, 0.92)"
                    }
                }, {
                    'polyline': {
                        'path3v': [greenOrbit],
                        'thickness': 5.5,
                        'color': "#39b739",
                        'isClosed': true
                    }
                }, {
                    'polyline': {
                        'path3v': [redOrbit],
                        'thickness': 2.5,
                        'color': "#ff3b3b",
                        'isClosed': true
                    }
                }]
        });

        var osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        var globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "layers": [osm, collection],
            "terrain": new GlobusTerrain()
        });
    </script>
</body>

</html>